<template>
    <div class="bin">
    <p class="fn">申请人信息</p>
    <p class="fn1">姓名:{{ data.username }}</p>
    <p class="fn2">部门:{{ data.departmentName }}</p>
    <p class="fn3">入职时间:{{ data.timeOfEntry }}</p>
    
    
    </div>
    
    <div class="bin2">
    
    <p class="fn">放假申请</p>
    <p class="gn1">审批类型:{{ obj.processName }}</p>
    <p class="gn2">休假类别:{{ data.process_leave=='process_leave'?'请假' :"调休"}}</p>
    <p class="gn3">放假时长:{{ obj.duration }}</p>
    <p class="gn4">申请理由:{{ obj.reason }}</p>
    
    <p class="gn5">开始时间:{{ obj.startTime }}</p>
    <p class="gn6">结束时间:{{ obj.endTime }}</p>
    <p class="gn7">申请单位:{{ data.departmentName }}</p>
    <p class="gn8">审批状态:{{ data.processState=='0'?"待审批":'已通过' }}</p>
    
    
    
    
    </div>
    </template>
    <script setup lang="ts">
    import { onMounted,ref } from 'vue';
    import { useRouter } from 'vue-router';
    import { getDetail } from '../axios/user'
    let router=useRouter()
    let ids=ref('')
    let data=ref({})
    let datas=ref({})
    let obj=ref({})
    onMounted(()=>{
        ids.value=router.currentRoute.value.query.id 
        console.log(ids.value);
        // ids.value=id
        get()
    })
    let get=async()=>{
        let res=await getDetail(ids.value)
        console.log(res.data.data);
        data.value=res.data.data
        datas.value=res.data.data.procData
        console.log(datas.value,'1111');
        obj.value=JSON.parse(datas.value)
        console.log(obj.value,'obj');
        
    }
    </script>
    <style>
    .bin{
       width:1200px;
       height: 160px;
       background: #f5f5f5;
    }
    .bin2{
       width:1200px;
       height: 260px;
       background: #f5f5f5;
       margin-top: 10px;
    }
    .fn{
        float: left;
        margin-left: 20px;
        margin-top: 20px;
        font-size: 18px;
    
    }
    .fn1{
        float: left;
        margin-left: -85px;
        margin-top: 60px;
        font-size: 18px;
    
    }   
    
    .fn2{
        float: left;
        margin-left: -110px;
        margin-top: 105px;
        font-size: 18px;
    }  
    
    .fn3{
        float: left;
        margin-left: 85px;
        margin-top: 105px;
        font-size: 18px;
    } 
    
    
    .gn1{
        float: left;
        margin-left: -72px;
        margin-top: 75px;
        font-size: 18px;
    
    }  
    .gn2{
        float: left;
        margin-left: -114px;
        margin-top: 120px;
        font-size: 18px;
    } 
    .gn3{
        float: left;
        margin-left: -114px;
        margin-top: 165px;
        font-size: 18px;
    } 
    .gn4{
        float: left;
        margin-left: -114px;
        margin-top: 210px;
        font-size: 18px;
    } 
    
    
    
    
    .gn5{
        float: left;
        margin-left: 72px;
        margin-top: 75px;
        font-size: 18px;
    
    }  
    .gn6{
        float: left;
        margin-left: -255px;
        margin-top: 120px;
        font-size: 18px;
    } 
    .gn7{   
        float: left;
        margin-left: -255px;
        margin-top: 165px;
        font-size: 18px;
    } 
    .gn8{
        float: left;
        margin-left: -255px;
        margin-top: 210px;
        font-size: 18px;
    } 
    </style>